<script setup lang="ts">

import {inject, type PropType} from "vue";

interface CustomerVO {
  cus_img: string
  cus_name: string
  cus_id: number
  cus_sex: number
  inherit_id?: number
  is_del_follow_user?: number
  status?: number
}


defineProps({
  customer: {
    type: Object as PropType<CustomerVO>,
    required: true,
    default: () => ({
      cus_img: '',
      cus_name: '',
      cus_id: 0,
      cus_sex: 0,
      inherit_id: 0,
      status: 1,
    })
  },
})


const ImplCustomerShow  = inject('ProvideCustomerShow')

</script>

<template>
  <div class="customer">
    <div class="customer-img" @click="ImplCustomerShow(customer.cus_id)">
      <el-avatar shape="square" size="large" alt="查看详情"
                 :src="customer.cus_img?customer.cus_img:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"/>
    </div>
    <div class="customer-desc">
      <div class="user-name">
        {{ customer.cus_name }}
      </div>
      <div class="user-id">
        <vxe-text click-to-copy :copy-config="{status: 'primary'}"> {{ customer.cus_id }}</vxe-text>
      </div>
      <div class="user-tag">
        <el-tag :type="customer.cus_sex==2?'danger':(customer.cus_sex==1?'primary':'info')" size="small">
          {{ customer.cus_sex == 2 ? '女' : (customer.cus_sex == 1 ? '男' : '未知') }}
        </el-tag>
        <el-tag type="danger" size="small"
                v-if="customer.is_del_follow_user && customer.is_del_follow_user>0">
          客删
        </el-tag>
        <el-tag type="warning" size="small"
                v-if="customer.inherit_id && customer.inherit_id>0">
          重粉
        </el-tag>
        <el-tag type="danger" size="small"
                v-if="customer.status && customer.status===99">
          删除
        </el-tag>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.customer {
  display: flex;
  height: 100%;
  align-items: center;


  .customer-img {
    padding-right: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .customer-desc {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;

    .user-name {
      width: 100%;
      font-size: 14px;

    }

    .user-id {
      font-size: 12px;
      width: 100%;
    }

    .user-tag {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 5px;
    }
  }
}
</style>